<template>
    <div class="pageheader">
    校内应用
    </div>
    <section id="main-content" class="animated fadeInUp">
      <div class="row">
        <com-departmentstatistical filiter-url='care/site/getdept'></com-departmentstatistical>
        <com-timestatistical></com-timestatistical>
        <com-application-charts :application-charts-title="applicationChartsTitle" chartsurl="care/site/netcenter/app/dashboard" titleurl="care/site/netcenter/app/dashboard"></com-application-charts>
      </div>
      <com-filiter-list :listfilter="listfilter" filterurl="./mock/listFilter.json"></com-filiter-list>
    </section>
</template>
<script>
import ComTimestatistical from '../../components/timestatistical.vue';
import ComDepartmentstatistical from '../../components/departmentstatistical.vue';
import ComApplicationCharts from '../../components/applicationCharts.vue';
import ComFiliterList from '../../components/filiterList.vue';

export default {
  components: {
    ComTimestatistical,
    ComDepartmentstatistical,
    ComApplicationCharts,
    ComFiliterList
  },
  data () {
    return {
      applicationChartsTitle:[{name:"总应用数"},{name:"总使用人数"},{name:"当前在线人数"}],
       listfilter:[{
          "name":"综合排序",
          "packData":"all"
        },{
          "name":"应用状态",
          "packData":"station"
        },{
          "name":"使用人数",
          "packData":"use"
        },{
          "name":"收藏人数",
          "packData":"love"
        },{
          "name":"平均评分",
          "packData":"average"
        },{
          "name":"流程",
          "packData":"Process"
      }],
    }
  }
}
</script>
<style scoped>
div.row {
  margin-right: 0;
  margin-left: 0;
}

div.departmentMain {
  position: relative;
  top: 20px;
}
.middleshowcard {
  margin: 0 2%;
}

div.infoBorder{
  border-right: 1px solid #efefef;
}
div .fastDemo{
  font-size: 20px;
  color: #42dbd5;
  margin-top: 8px;
}
div .lastDemo{
  font-size: 20px;
  color: #ffe67f;
  margin-top: 8px;
}
div.card-info{
  text-align: center;
  margin-top: 36px;
  margin-bottom: 24px;
  color: #b3c2cc;
}
div.headDescription{
  font-size: 18px;
}
div.overViewheader {
    height: 50px;
}
div.headDescription {
    width: 200px;
    float: left;
}
div.headDescription span {
  height: 50px;
  line-height: 50px;
  color: #767E85; 
}
div.statistical {
  /*width: 500px;*/
  float: right;
}
div.statistical span{
  float: left;
  height: 50px;
  width: 100px;
  font-size: 14px;
  line-height: 50px;
  color: #767E85; 
}
div.statistical .labelCheckList {
  height: 50px;
  float: left;
  padding-top: 10px;

}
div.statistical button {
    outline:none;
    height: 26px;
    font: -webkit-mini-control;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 8px;
    border-radius: 13px;
    min-width: 80px;
    color: #666;
    background-color: #fff;
}
div.statistical button.active {
    color: #fff;
    background-color: #2ACDCF;
    border: none;
}
div.overViewMain{
  position: relative;
  top: 20px;
}
div.overViewMain div.showCard {
    width: 32%;
    float: left;
    cursor: pointer;
    min-height: 600px;
    border-radius: 10px;
    /*margin-left: 30px;*/
    background-color:#fff;
    border: none;
    /*box-shadow: 0 0 10px #2ACDCE;*/
}
div.overViewMain div.showCard:hover{
    border: 1px solid #2ACDCE;
    box-shadow: none;
}
div.showCard h3{
  text-align: center;
}
div.showCard .cardLine{
 border-top: 1px solid #efefef;
 margin-top: 16px;
 margin-left: 24px;
 margin-right: 24px;
 text-align: center;
}
div.showCard .cardLine span{
  background: #fff;
  position: relative;
  top: -12px;
}
div.department .score{
  text-align: center;
}
div.pageheader {
    font-size: 20px;
    color: #3F4652;
}

</style>